<template>
  <div class="home">
    <div class="main">
      <div class="location" v-show="!isLoading" style="text-align: center;">
      <!-- <van-icon name="location-o" size="25" color="#eee"></van-icon> -->
      </div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" loading-text="刷新中">
        <div class="refresh">
          <div class="searchAndSwiper">
            <van-search
              v-model="val"
              :placeholder="placeholder"
              shape="round"
              left-icon="scan"
              show-action
              @search="onSearch"
              @focus="onSearch"
            >
              <template #left-icon>
                <van-icon name="scan" @click="scanCode" />
              </template>
              <template #action>
                <van-button
                  type="primary"
                  size="small"
                  text="搜索"
                  @click="mySearch"
                  round
                />
              </template>
            </van-search>

            <div class="swiper">
              <Myswiper></Myswiper>
            </div>
          </div>

          <div class="navFather">
            <nav class="nav">
              <section
                v-for="item in classifyList"
                :key="item.categoryId"
                @click="goClassifys(item.categoryId)"
              >
                <div width="'100%''" height="'75%'">
                  <img :src="item.imgsrc" />
                </div>
                <div class="classifyName">{{ item.classifyname }}</div>
              </section>
            </nav>
          </div>

          <div class="_centerDiv">
            <div class="centerDiv">
              <div class="perCenterDiv">
                <p class="top">
                  <span style="font-weight: bolder">今日值得抢</span>
                  <van-count-down :time="time">
                    <template #default="timeData">
                      <span class="block">{{ timeData.hours }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.minutes }}</span>
                      <span class="colon">:</span>
                      <span class="block">{{ timeData.seconds }}</span>
                    </template>
                  </van-count-down>
                </p>
                <div class="centerimg">
                  <div style="position: relative">
                    <img
                      src="https://img2.baidu.com/it/u=3855360044,3348904878&fm=253&fmt=auto&app=138&f=JPEG?w=633&h=500"
                      alt=""
                    />
                    <span class="price">￥12.9</span>
                  </div>
                  <div style="position: relative">
                    <img
                      src="https://img1.baidu.com/it/u=297074851,3706741774&fm=253&fmt=auto& app=138&f=JPEG?w=749&h=500"
                      alt=""
                    />
                    <span class="price">￥12.9</span>
                  </div>
                </div>
              </div>

              <div class="perCenterDiv">
                <p class="top">
                  <span style="font-weight: bolder">超会囤</span>
                  <button
                    style="
                      border: 0;
                      margin-left: 50x;
                      border-radius: 10px;
                      width: 50px;
                      height: 20px;
                      background: rgb(178, 214, 240);
                    "
                  >
                    惠购
                  </button>
                </p>
                <div class="centerimg">
                  <div style="position: relative">
                    <img
                      src="https://img2.baidu.com/it/u=3855360044,3348904878&fm=253&fmt=auto&app=138&f=JPEG?w=633&h=500"
                      alt=""
                    />
                    <span class="price">￥12.9</span>
                  </div>
                  <div style="position: relative">
                    <img
                      src="https://img1.baidu.com/it/u=297074851,3706741774&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500"
                      alt=""
                    />
                    <span class="price">￥12.9</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="pro">
            <List :list="unlist"></List>
          </div>
        </div>
      </van-pull-refresh>
    </div>
    <van-popup v-model="isshow" position="right" :style="{ height: '100%' }">
      <Search_Ranking @change="changeIsshow" ref="Search_Ranking"></Search_Ranking>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import Myswiper from "@/views/homes/myswiper.vue";
import Search_Ranking from "@/views/homes/search_Ranking.vue";
import List from "@/components/list.vue";
import Pro from "@/api/pro.js";
export default {
  components: {
    Myswiper,
    Search_Ranking,
    List,
  },
  data() {
    return {
      isshow: false,
      serchList: ["椰汁", "生蚝", "芹菜"],
      placeholder: "",
      isLoading: false,
      classifyList: [],
      val: "", //搜索框绑定的value
      unlist: [
        {
          id: 1,
          img: "https://t7.baidu.com/it/u=760837404,2640971403&fm=193&f=GIF",
          title: "澳门永辉传统蛋卷200g",
          notes: "预计明日达",
          price: "29.00",
          unit: "盒",
          cheap: "满99减20",
          describe: "天然果香|清甜爽口|100%果汁",
          primary: "34.00",
        },
        {
          id: 2,
          img: "https://t7.baidu.com/it/u=797003763,323650745&fm=193&f=GIF",
          title: "澳门永辉传统蛋卷200g",
          notes: "预计明日达",
          price: "29.00",
          unit: "箱",
          primary: "34.00",
        },
        {
          id: 3,
          img: "https://img0.baidu.com/it/u=160733136,1430664583&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
          title: "澳门永辉传统蛋卷200g",
          notes: "预计明日达",
          price: "29.00",
          unit: "件",
          cheap: "满99减20",
          describe: "天然果香|清甜爽口|100%果汁",
        },
        {
          id: 4,
          img: "https://img2.baidu.com/it/u=3663632024,2879009838&fm=253&fmt=auto&app=138&f=JPEG?w=746&h=500",
          title: "澳门永辉传统蛋卷200g",
          notes: "预计明日达",
          price: "29.00",
          unit: "盒",
        },
        {
          id: 5,
          img: "https://p0.itc.cn/images01/20201005/0adb6f9bada54053a66468e5e958870c.jpeg",
          title: "澳门永辉传统蛋卷200g",
          notes: "预计明日达",
          price: "29.00",
          unit: "盒",
        },
      ],
      time: 30 * 60 * 60 * 1000,
    };
  },
  mounted() {
    this.historyList = JSON.parse(localStorage.getItem("historyList")) || [
      "西安",
      "牛肉干",
      "蘑菇",
    ];
    this.getClassifyList1();

  },
  methods: {
    async getClassifyList1() {
      let res = await Pro.getClassifyList();
      // console.log(res)
      this.classifyList = res.data;
      this.classifyList.map((item) => {
        // item.imgsrc=''
      });
    },
    goClassifys(id) {
      this.$router.replace("/classifys");
      this.$store.commit("SET_CHANGEACTIVE", id);
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },

    onSearch() {
      this.isshow = true;
    },
    changeIsshow(val) {
      this.isshow = false
      this.$refs.Search_Ranking.isshow=true
      this.$refs.Search_Ranking.searchlist=[]
      this.$refs.Search_Ranking.val=""
    },
    mySearch(val) {
      console.log(val);
    },
    scanCode() {
      //使用路由跳转打开扫码页面并携带参数
      this.$router.push({
        path: "/qrcodeStream",
        query: { userId: "1004003" },
      });
    },
  },
  beforeDestroy() {
    this.active = 0;
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
.van-search__action{
  padding: 0;
  margin-right: 10px;
}
  .main {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    .location {
      height: 30px;
      background: rgb(246, 117, 57);
      // background: rgb(246, 226, 217);
    }
  .centerDiv{
    padding: 20px 10px;
    box-sizing: border-box;
  }
    .refresh {
      display: flex;
      flex-direction: column;

      .searchAndSwiper {
        background: url("https://img1.baidu.com/it/u=630594538,3051813235&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=253");
        background: linear-gradient(rgb(246, 117, 57), #f8f8f8);

        .van-search {
          width: 95%;
          margin: 0 auto;
          border-radius: 20px;
          padding: 0;
        }
      }
    }

    .navFather {
      background: #eee;
      padding: 10px;
      box-sizing: border-box;

      .nav {
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        section {
          width: 70px;
          height: 100px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          img {
            width: 50px;
            height: 50px;
          }
        }
      }
    }
    ._centerDiv {
      width: 100vw;
      box-sizing: border-box;
      background: #eee;
      padding: 0 3vw 10px 3vw;

      .centerDiv {
        width: 99%;
        background: #fff;
        display: flex;
        justify-content: space-between;
        border-radius: 10px;
        overflow: hidden;

        .perCenterDiv {
          width: 44vw;
        }

        .top {
          display: flex;
          width: 100%;
          margin-bottom: 5px;
        }

        .centerimg {
          width: 100%;
          display: flex;
          box-sizing: border-box;
          padding: 0 10px 0 10px;
          justify-content: space-between;
          // width: 80%;
          border-radius: 10px;
          overflow: hidden;
          background: #fff;

          // margin: 0 auto;
          img {
            width: 60px;
            height: 60px;
            // height:60%;
            // border-radius: 10px;
          }
        }

        .price {
          position: absolute;
          display: inline-block;
          bottom: 0;
          right: 0;
          padding: 0 2px 0 2px;
          font-size: 12px;
          background: #ee8484;
          border-radius: 10px;
          // width: 100%;
        }

        .colon {
          display: inline-block;
          margin: 0 2px;
          color: #ee0a24;
        }

        .block {
          display: inline-block;
          width: 16px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          background-color: #e16b79;
        }
      }
    }
  }

  .van-search__action {
    line-height: 20px;
  }
  .van-search {
    height: 40px;
    line-height: 40px;
  }
}
.van-icon:before {
  font-size: 22px;
}
</style>